<template>
  <div class="login">
    <div class="m">
      <div class="guanbi" @click="tuchu">
        <img src="../assets/gb.png" alt="" />
      </div>
      <ul class="form">
        <li>登录账号</li>
        <li v-for="(item, index) in login" :key="index">
          <van-field
            v-model="item.information"
            label-width="25px"
            :placeholder="item.title"
            :type="item.type"
            @blur="format"
          >
            <template #button>
              <span v-show="item.mistake" style="color: rgb(250, 58, 58)"
                >格式错误</span
              >
            </template>
          </van-field>
        </li>
        <li @click="onLogin"><span> 登录 </span></li>
      </ul>
    </div>
    <ul class="dibu">
      <li>手机号码登录</li>
      <li @click="zhuce">注册账号</li>
      <li>找回来密码</li>
    </ul>

    <van-popup v-model="show" round
      ><div class="tis">
        <span class="misn">登录失败</span>
        <span class="misn">请输入正确的{{ this.text }}</span>
      </div>
      <van-button type="default" class="qding" @click="qding">确定</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Button } from "vant";
import { Popup } from "vant";
import { Field } from "vant";
import { Overlay } from "vant";
import API from "./../http/API";
import { Toast } from "vant";
export default {
  name: "login",
  components: {
    [Field.name]: Field,
    [Overlay.name]: Overlay,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
  },
  data() {
    return {
      show: false,
      login: [
        {
          title: "账号/用户",
          type: "username",
          mistake: false,
          information: "",
          //通过信息
          pass: true,
        },
        {
          title: "密码",
          type: "password",
          mistake: false,
          information: "",
          pass: true,
        },
      ],
      // 如果全对了就让他进行登录
      loginstak: true,
      text: "账号",
      //
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    tuchu() {
      this.$router.push("/home");
    },
    format() {
      this.mans("geshi");
    },
    mans(e) {
      console.log("13268453");
      // 传入e只是为了记录要不要登录
      var reg = /[^\x00-\x80]/;
      // // 传入要不要登录
      this.loginstak = true;
      for (let index = 0; index < this.login.length; index++) {
        if (
          this.login[index].information == "undefined" ||
          !this.login[index].information ||
          !/[^\s]/.test(this.login[index].information)
        ) {
          this.login[index].mistake = false;
          this.login[index].pass = false;
          // 如果等于空的不让他进行登录
          console.log("空的");
          this.loginstak = false;
          console.log(this.loginstak);
          this.$forceUpdate();
          return;
        } else {
          if (!reg.test(this.login[index].information)) {
            this.login[index].mistake = false;
            this.login[index].pass = true;
            this.loginstak = true;
          } else {
            this.login[index].mistake = true;
            this.login[index].pass = false;
            this.loginstak = false;
            this.$forceUpdate();
            return;
            // 如果有存在中文的也是不让他进行登录
          }

          this.$forceUpdate();
        }
      }
    },

    onLogin() {
      // localStorage.setItem("token", "12345689641354635613561");
      this.mans("login");

      this.http();
    },
    http() {
      console.log(this.login[0].information);

      if (this.loginstak == true) {
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "正在登录",
        });
        let second = ".";
        const timer = setInterval(() => {
          toast.message = `正在登录 ${second} `;
        }, 1000);
        this.$post(API.POST_AUTH_LOGIN, {
          username: this.login[0].information,
          password: this.login[1].information,
        }).then((res) => {
          // console.log(res);
          clearInterval(timer);

          // 手动清除 Toast
          toast.clear();
          if (res.errmsg == "成功") {
            Toast({
              message: "登录成功",
              position: "top",
            });
            this.$store.commit("tokens", res.data.token);
                this.$store.commit("onlogin", true);
            console.log(res);
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            // 保存时间来验证token
            var timestamp = new Date().valueOf();
            localStorage.setItem("timestamp", timestamp);
            this.$router.push("/");
          }
        });
      } else {
        console.log("不允许");
        for (let index = 0; index < this.login.length; index++) {
          if (this.login[index].pass == false) {
            console.log("等于false");
            if (
              this.login[index].information == "undefined" ||
              !this.login[index].information ||
              !/[^\s]/.test(this.login[index].information)
            ) {
              return Dialog.alert({
                title: "提示",
                message: this.login[index].title + "未填写",
              }).then(() => {
                // on close
              });
            } else {
              return Dialog.alert({
                title: "提示",
                message: this.login[index].title + "项有错误",
              }).then(() => {
                // on close
              });
            }
          }
        }
      }
    },

    zhuce() {
      this.$router.push("/register");
    },
    qding() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.misn {
  &:nth-child(1) {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.qding {
  display: block;
  // margin-top: 10px;
  border-top: 1px solid rgb(233, 233, 233);
  width: 100%;
  line-height: 50px;
  text-align: center;
  height: 50px;
  font-size: 20px;
}
.tis {
  border-radius: 5px;
  overflow: hidden;
  width: 80vw;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
}
// 表单字体
.dibu {
  height: 50px;
  width: 80%;
  margin: 0 auto;

  display: flex;
  li {
    flex: 1;
    text-align: center;
  }
}
.form {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  li {
    height: 50px;
    display: flex;
    align-items: center;
    .van-cell {
      padding: 0;
      font-size: 16px;
    }
  }
  & li:nth-child(1) {
    font-size: 25px;
  }

  & li:nth-child(2) {
    // height: 30px;
    margin-top: 10px;

    border-bottom: 1px solid rgb(217, 217, 218);
  }
  & li:nth-child(3) {
    // height: 30px;
    margin-top: 10px;
    border-bottom: 1px solid rgb(217, 217, 218);
  }
  & li:nth-child(4) {
    // height: 30px;
    margin-top: 5px;
    height: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    // border: 1px solid #000;
    span {
      display: block;
      width: 100%;

      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      height: 40px;
      color: rgb(240, 240, 240);
      font-size: 16px;
      background-color: rgb(62, 174, 248);
    }
  }
}
.login {
  .m {
    flex: 1;
    margin-top: 20px;
    margin-right: 10px;
    margin-left: 10px;
    // border: 1px solid #000;
    .guanbi {
      img {
        width: 15px;
        height: 15px;
      }
    }
  }
}
</style>